<template>
  <div id="main-container" class="m-auto w-[1050px] bg-gray-200">
    <!-- 第一个推荐区块 -->
    <a-row :gutter="30" id="first-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="main-recommend-col" class="bg-white mr-6">
        <a-typography-title :level="2" id="main-recommend-title" class="!pb-2 !mb-4 !text-lg title_border"> 今日推荐 </a-typography-title>

        <a-list id="main-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list1" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`main-list-item-${item.time}`" class="!py-1">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 第一个分类区块 -->
      <a-col :span="9" id="main-category-col" class="bg-white">
        <a-typography-title :level="2" id="main-category-title" class="!pb-2 !text-lg title_border1"> 文章分类 </a-typography-title>

        <div id="main-category-container" class="h-[170px] flex flex-col justify-between">
          <a-row
            v-for="(row, index) in 4"
            :key="row"
            :id="`main-category-row-${index + 1}`"
            class="!mx-0 border-b border-gray-300 last:border-b-0 py-2"
          >
            <a-col v-for="(col, colIndex) in 2" :key="col" :span="12" :id="`main-category-item-${index + 1}-${colIndex + 1}`">
              <div class="flex items-center border_3 mb-7">
                <folder-open-two-tone id="main-folder-icon" class="mr-2" />
                <span class="text-base font-semibold text-lg">工作总结</span>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 电子区块 -->
    <a-row :gutter="30" id="electronics-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="electronics-recommend-col" class="bg-white mr-6">
        <a-row id="electronics-header">
          <a-typography-text id="electronics-title" class="!pb-2 !mb-4 !text-lg title_border text-red-500 w-full font-black">
            电子
          </a-typography-text>
          <span id="electronics-more-link" class="absolute right-[12px] top-2 text-gray-300">更多</span>
        </a-row>

        <a-list id="electronics-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list2" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`electronics-list-item-${item.time}`" class="!py-1">
              <div class="items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 电子分类区块 -->
      <a-col :span="9" id="electronics-hot-col" class="bg-white">
        <a-typography-title :level="2" id="electronics-hot-title" class="!pb-3 !text-lg title_border1"> 热门电子 </a-typography-title>

        <div id="electronics-hot-container" class="h-[170px] flex flex-col justify-between">
          <a-row v-for="n in 10" :id="`electronics-hot-item-${n}`" class="mb-4" :key="n">
            <a-typography-text
              :id="`electronics-rank-${n}`"
              :class="['w-4 h-4 leading-4 text-center mr-1', n <= 3 ? 'bg-orange-200 text-white' : 'bg-gray-200']"
            >
              {{ n }}
            </a-typography-text>
            <a-typography-text :id="`electronics-content-${n}`" class="text-base font-semibold leading-4">
              工作总结xxxxxxxxxxxxxxxxxxx
            </a-typography-text>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 总结区块 -->
    <a-row :gutter="30" id="summary-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="summary-recommend-col" class="bg-white mr-6">
        <a-row id="summary-header">
          <a-typography-text id="summary-title" class="!pb-2 !mb-4 !text-lg title_border text-red-500 w-full font-black">
            总结
          </a-typography-text>
          <span id="summary-more-link" class="absolute right-[12px] top-2 text-gray-300">更多</span>
        </a-row>

        <a-list id="summary-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list2" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`summary-list-item-${item.time}`" class="!py-1">
              <div class="items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 总结分类区块 -->
      <a-col :span="9" id="summary-hot-col" class="bg-white">
        <a-typography-title :level="2" id="summary-hot-title" class="!pb-3 !text-lg title_border1"> 热门总结 </a-typography-title>

        <div id="summary-hot-container" class="h-[170px] flex flex-col justify-between">
          <a-row v-for="n in 10" :id="`summary-hot-item-${n}`" class="mb-4" :key="n">
            <a-typography-text
              :id="`summary-rank-${n}`"
              :class="['w-4 h-4 leading-4 text-center mr-1', n <= 3 ? 'bg-orange-200 text-white' : 'bg-gray-200']"
            >
              {{ n }}
            </a-typography-text>
            <a-typography-text :id="`summary-content-${n}`" class="text-base font-semibold leading-4">
              工作总结xxxxxxxxxxxxxxxxxxx
            </a-typography-text>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
  
<script setup lang="jsx">
import { List, Typography, Row, Col } from 'ant-design-vue';
import { FolderOpenTwoTone } from '@ant-design/icons-vue';

const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
const AListItem = List.Item;
const list1 = ref([
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
]);
const list2 = ref([
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
  {
    time: '[12-26]',
    content: '2025年春节七言对联大会',
  },
]);
</script>
  
  <style scoped>
.title_border {
  border-bottom: 2px solid #0081e5;
}
.title_border1 {
  border-bottom: 2px solid green;
}
.border_3 {
  border-bottom: 1px solid #e7e6e6;
}
</style>